html, body {
    width: 100%;
    height: 100%;
    font-family: MicrosoftYaHei;
}

.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

.input {
    border: solid 1px #CCCCCC;
    text-align: center;
    display: block;
    line-height: 42px;
    font-size: 16px;
    width: 80%;
    margin: 30px auto;
    padding: 0 10px;
    border-radius: 7px;
}

.input:focus {
    border: solid 1px #FA8605;
    border-radius: 0px;
}

.display {
    display: block;
}

.weui-navbar__item {
    background-color: #FFCA11;
    font-weight: 900;
    border: none;
}

.weui-bar__item_on {
    background: linear-gradient(#BD1FE1, #8C37FC);
    color: #FFFFFF;
    font-weight: 900;
    border: none;
}

.tab-content-one {
    background-color: #FA8605;
    width: 100%;
    min-height: 100%;
}

.btn-group {
    position: absolute;
    bottom: 100px;
    text-align: center;
    width: 100%;;
}

.ul > li {
    border: solid 1px #f5ead0;
}

.height {
    height: 100%;
    max-height: calc(59% - 50px);
}

.WB_arrow {
    width: 80%;
    padding-top: 5px;
    height: 25px;
    border: 1px solid #FA8605;
    position: relative;
    left: 10%;
    top: 14px;
    color: #fa8305;
    font-size: 12px;
    font-weight: 900;
    margin: 6% 0;
}

.arrow {
    position: absolute;
    width: 7px;
    top: -8px;
    right: -1px;
}

.prize-title {
    font-weight: 900;
}

.index-head {
    width: 100%;
    height: 50%;
}

.share {
    min-height: 100%;
    background-image: url('../img/background.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
}

.share-img {
    width: 50px;
    border-radius: 25px;
    position: absolute;
    top: 10px;
    left: calc(50% - 25px);
}

.share-text {
    width: 100%;
    position: absolute;
    top: 70px;
    text-align: center;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 900
}

.share-p {
    font-size: 12px;
    color: #666666;
}

.share-p-title {
    font-size: 20px;
    color: #333333;
    font-weight: 900;
    padding: 20px 0 6px 0;
}

.share-arrow {
    width: 20px;
    height: 20px;
    background-color: #FFFFFF;
    transform: rotate(45deg);
    display: inline-block;
}

.share-div {
    width: 90%;
    height: 100%;
    background-color: #FFFFFF;
    position: relative;
    top: -17px;
    left: 5%;
    border-radius: 30px
}

.share-btn {
    margin: auto;
    width: 80% !important;
    background-color: #FA8605;
}

.index-btn-group {
    text-align: center;
    margin-top: -11%;
}

.index-recommend-msg {
    height: 25%;
    width: 60%;
    margin: 0 10%;
    background-color: #fff9cf;
    border-radius: 20px;
    font-size: 12px;
    text-align: center;
    padding: 2% 10%;
    color: #8f7847;
}

.index-recommend-introduction {
    font-size: 18px;
    font-weight: 900;
    background-image: url('../img/head.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
}

.index-recommend-text {
    text-align: left;
}

.index-phone {
    text-align: center;
    font-size: 12px;
    color: #fff9cf;
    padding: 3px;
}

.index-QQ {
    text-align: center;
    padding: 10px;
    width: 70%;
    border: solid 1px #ffffff;
    margin: 0 auto;
    font-size: 12px;
    border-radius: 30px;
    color: #fff9cf;
    margin-bottom: 20px;
}

.rank-head {
    height: 41%;
    background-color: #FA8605;
    text-align: center;
}

.rank-myRank {
    position: relative;
    background-color: #fff9cf;
    border-radius: 30px;
    height: 20%;
    width: 88%;
    top: -13%;
    right: -6%;
    vertical-align: top;
}

.rank-first {
    width: 30%;
    height: 100%;
    display: inline-block;
}

.rank-first > img {
    height: 50%;
    border-radius: 50%;
    position: absolute;
    top: -24%;
    left: 5%;
}

.rank-first > div {
    width: 100%;
    height: 50%;
    text-align: center;
    font-weight: 900;
    color: #8f7c54;
}

.rank-other {
    width: 32%;
    height: 100%;
    display: inline-block;
    text-align: center;
    color: #7228ca
}

.rank-other > p {
    font-weight: 900;
    font-size: 14px
}

.rank-other > span {
    font-weight: 900;
    font-size: 32px
}

.rank-123 {
    height: 100%;
    width: 20%;
    display: inline-block;
    position: relative;
    left: -13px;
    top: -13px;
}

.rank-others {
    width: 100%;
    background-color: #fff9e5;
    position: relative;
    top: -21%;
    padding: 8% 0;
    overflow: auto;
}

.rank-others-rank {
    text-overflow: ellipsis;
    display: inline-block;
    width: 30%;
    height: 100%;
    font-weight: 900;
    position: relative;
    top: -13px;
}

.rank-others-recommend {
    display: inline-block;
    width: 30%;
    height: 100%;
    font-weight: 900;
    position: relative;
    top: -13px;
}

.rank-others-img {
    height: 80%;
    border-radius: 50%;
    display: inline-block;
    margin-top: 4px;
}

.rank-allRank {
    width: 100%;
    height: 5%;
    position: absolute;
    top: 36.5%;
    background-color: #fff9cf;
    box-shadow: 0 0 15.5px 0.5px rgba(247, 115, 11, 0.19);
    color: #c58d4d;
    font-weight: 900;
}

.rank-all {
    display: inline-block;
    height: 100%;
    width: 40%;
}

.rule-reward {
    display: table-cell;
    width: 32%;
    height: 100%;
    vertical-align: top;
    background-color: #ffa459;
    border: solid 3px #FA8605;
}

.rule-reward-title {
    width: 67%;
    padding-top: 2px;
    height: 21px;
    background-color: #fff9cf;
    border-radius: 13px;
    position: relative;
    top: -7px;
    left: 15%;
    color: #8f7c54;
    font-size: 12px;
    text-align: center;
}

.rule-dot {
    width: 4px;
    height: 4px;
    border-radius: 2px;
    display: inline-block;
    background-color: #fff9cf;
    margin-bottom: 4px;
}

.rule-line {
    height: 1px;
    width: 25%;
    display: inline-block;
    background-color: #fff9cf;
}

.rule {
    width: 100%;
    margin-top: 20px;
    color: #FFFFFF;
    font-size: 13px;
}

.rule-title {
    color: #ffffff;
    text-align: center;
    font-weight: 900;
    position: absolute;
    width: 80%;
    height: 20%;
    top: -10%;
    left: 10%;
    background-image: url('../img/tag.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
}

.rule-text {
    width: 90%;
    height: 30%;
    background-color: #fff9cf;
    border-radius: 15px;
    margin-left: 5%;
    position: relative;
    top: -85px;
}